<template>
    <q-item v-if="isShow">
        <q-item-side><img style="width: 60px;" :src="item.vpic"></q-item-side>
        <q-item-main class="col-md">
            <q-item class="q-pa-none" @click.native="clickItem(item)">
                <q-item-main>
                    <q-item-tile label class="q-pr-md">{{item.title}}</q-item-tile>
                    <q-item-tile sublabel class="q-size-xs">【{{item.account}}】 {{item.collecttime}}</q-item-tile>
                </q-item-main>
                <q-item-side right icon="mdi-chevron-right" v-if="!isMobile" />
            </q-item>
            <q-item class="q-pa-none videoItem">
                <q-item-main class="col-md">
                    <q-chip v-if="position == 'all'" class="q-mr-sm" color='pink' dense icon="mdi-flash-circle">
                        {{formatNumbers(item.upCount/item.fanCount)}}
                    </q-chip>
                    <q-chip class="q-mr-sm" dense icon="mdi-cards-heart">
                        {{formatNumbers(item.upCount)}}
                    </q-chip>
                    <q-chip class="q-mr-sm" dense icon="mdi-comment-processing">
                        {{formatNumbers(item.commentCount)}}
                    </q-chip>
                    <q-chip class="q-mr-sm" dense icon="mdi-share">
                        {{formatNumbers(item.shareCount)}}
                    </q-chip>
                    <q-chip class="q-mr-sm" dense icon="mdi-clock">
                        {{formatSeconds(item.duration)}}
                    </q-chip>
                </q-item-main>
                <q-item-side right>
                    <q-btn 
                        @click.stop.prevent="toggleFavor(item)"
                        right dense 
                        :flat="!!isfavor"
                        :outline="!isfavor"
                        :icon="!!isfavor?'mdi-star' : 'mdi-star-outline'"
                        :label="!!isfavor? '取消收藏' : '收藏'"
                        color='pink-8'
                        class="q-mr-sm"
                    />
                    <q-btn 
                        right dense outline
                        label="预览" color='orange-8'
                        :href="item.vurl" target="_blank" type='a'
                        @click.stop
                        v-if="isMobile"
                    />
                    <!-- <q-btn 
                        @click.stop.prevent="deleteVideos(item)"
                        right dense flat
                        icon="delete_outline"
                        label="删除"
                        color='grey-8'
                    /> -->
                </q-item-side>
            </q-item>
        </q-item-main>
        <!-- <q-item-side>
            <q-toggle
                v-model="item.modified"
                checked-icon="check"
                color="green"
                dense
                @input="changeModified(item)"
            />
        </q-item-side> -->
        <q-modal class="drawer_video" v-model="showVideoModal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">
            <div class="copyLink">
                <q-btn 
                    right dense
                    color='primary' 
                    label="复制" 
                    v-clipboard:copy="this.videoUrl" 
                    v-clipboard:success="onCopy"
                    icon="mdi-link"
                    class="q-mr-sm"
                />
                <q-btn 
                    @click.stop.prevent="toggleFavor(item)"
                    right dense 
                    :flat="!!isfavor"
                    :icon="!!isfavor?'mdi-star' : 'mdi-star-outline'"
                    :label="!!isfavor? '取消收藏' : '收藏'"
                    color='primary'
                    class="q-mr-sm"
                />
            </div>
            <div class="preview_frame">
                <iframe :src="this.videoUrl" scrolling="no" id="showIframe" />
            </div>
        </q-modal>
    </q-item>
</template>

<script>
export default {
  name: 'VideosItem',
  props: {
    item: {
        type: Object,
        required: true      
    },
    position: {
        type: String,
        required: true
    }
  },
  data() {
      return {
          isMobile: false,
          isShow: true,
          isfavor: false,
          showVideoModal: false,
          videoUrl: '',

      }
  },
  mounted() {
      this.isMobile = this.$q.platform.is.mobile
      this.isfavor = !!this.item.collected
  },
  methods: {
    formatNumbers( num ){
        let number = '' + num
        let showStr = ''
        if( number > 9999 ){
            showStr = Math.floor(number /  10000) + 'w+'
        } else if ( number > 999 && number < 10000){
            showStr = Math.floor(number / 1000 ) + 'k+'
        } else {
            showStr = Math.round( number * 1000 ) / 1000
        }

        return showStr
    },
    formatSeconds( number ) {
        if( !number ){
            return '00:00'
        }
        let second = Math.round( number / 1000 )
        let min = Math.floor( second / 60 )
        let sec = second % 60
        min = `0${min}`.slice( -2 )
        sec = `0${sec}`.slice( -2 )
        
        return `${min}:${sec}`
    },
    deleteVideos( item ) {
        let { id, caasid } = item;
        //   console.log( this.$q.dialog )
        let _dialog = this.$q
        .dialog({
            dark: true,
            title: "确认",
            message: "确认删除该视频吗？",
            cancel: "取消",
            ok: "确认删除",
            persistent: true
        })
        .then(() => {
            this.isShow = false
            this.$api.douyin.deleteVideos(id);
        })
        .catch(() => {
            console.log("cancel");
        });
    },
    toggleFavor() {
        let { id, caasid } = this.item;
        this.$api.douyin.favorVideos( id, !this.isfavor ).then( data => {
            this.isfavor = !this.isfavor
            console.log('操作成功')
        })
    },
    clickItem( item ){
        console.log('clickItem')
        if ( this.isMobile){
            return
        }
        let { vurl } = item
        console.log( vurl )
        this.showVideoModal = true
        this.videoUrl = vurl + '#pageletReflowVideo'
        this.showingItem = item
    },
    onCopy() {
        this.$q.notify({
            message: '复制成功', 
            position: 'top',
            color: 'green',
            timeout: 1000
        })  
    },
  }
}
</script>
<style>
.videoItem{
    flex-wrap: wrap;
}
.copyLink{
    position: absolute;
    right: 5px;
    top: 10px;
}
.preview_frame{
    width: 925px;
    overflow: hidden;
    height: 600px;
    margin-left: -275px;
}
.preview_frame iframe{
    background: #0E0F1A;
    border: none;
    height: 100%;
    width: 100%;
}
</style>